<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/Estilos/template.css" type="text/css" media="all"/>
                <script src="#{facesContext.externalContext.requestContextPath}/Scripts/PrimeFacesES.js" type="text/javascript"></script>
                <title>DISUTRAN S.A.: <ui:insert name="title"></ui:insert></title>
            </f:facet>
        </h:head>
        <h:body>

            <h:form id="principalForm">
                <div id="encabezado">
                    <table style="border: none; width: 100%;">
                        <tr>
                            <td style="text-align: left">
                                <img src="#{facesContext.externalContext.requestContextPath}/Imagenes/banner.png" width="709" height="100"/>
                            </td>
                            <td>
                                <div style="font-size: small" align="right">
                                    <p:commandButton id="menuSesion" value="Bienvenido, #{logBean.nombreUsuario()}" type="button" />
                                </div>
                                <div style="font-size: small" align="left">
                                    <p:overlayPanel id="imagePanel" for="menuSesion" showEffect="fade" hideEffect="fade">
                                        <ul>
                                            <li>
                                                <p:commandLink action="/index.xhtml" value="Inicio" ajax="false"/>
                                            </li>
                                            <li>
                                                <p:commandLink action="/CambioContrasena.xhtml" value="Cambiar contraseña" ajax="false"/>
                                            </li>
                                        </ul>
                                    </p:overlayPanel>  
                                </div>            
                                <div style="margin-top: 5px"></div>
                                <div align="right" style="margin-top: 10px; font-size: small">
                                    <p:clock mode="server"></p:clock>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="menu">
                    <p:menubar model="#{menuBean.model}" autoDisplay="false" style="font-size: small; background: white">
                        <f:facet name="options">
                            <p:commandButton value="Cerrar Sesión" icon="ui-icon-extlink" ajax="false" action="#{logBean.cerrarSesion()}" />
                        </f:facet>
                    </p:menubar>
                </div>
            </h:form>
            <p:separator/>
            <p:layout style="background: white; min-width:400px;min-height:485px; overflow: auto;">
                <p:layoutUnit position="south" size="40" closable="true" collapsible="true">
                    <ui:insert name="pie">
                        <table style="width: 100%">
                            <tr>
                                <td></td>
                                <td>
                                    <div align="right">
                                        <p:outputLabel style="font-size: smaller" value="El éxito más que una meta, una actitud"/>                        
                                    </div>
                                </td>

                                <td>
                                    <div align="right">
                                        <p:outputLabel style="font-size: x-small" value="Copyright &#169; 2015 por CCSOFT."/>
                                    </div>
                                </td>
                            </tr>                                
                        </table>


                    </ui:insert>
                </p:layoutUnit>

                <p:layoutUnit style="background: white" position="center">
                    <style style="background: white" type="text/css">
                        .ui-growl-item-container { 
                            background: #666;
                            opacity:1;
                            filter:alpha(opacity=100);} 
                    </style>
                    <ui:insert name="cuerpo"></ui:insert>
                </p:layoutUnit>
            </p:layout>
        </h:body>
    </f:view>
</html>